import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import moment from 'moment'
import { View, Text,Image } from '@tarojs/components'
import './index.less'
import coordinates from '../../img/dizhi.png'
import phone from '../../img/phone.png'
import otherRightArrow from '../../img/otherRightArrow.png'

@connect(({ template }) => ({ template }))
export default class template extends Component {

  config = {
    navigationBarTitleText: '',
  }

  handleClick(id){
    Taro.navigateTo({
      url:`../goodsDetails/index?id=${id}`
    })
  }

  businessLicense(){
    Taro.navigateTo({
      url:'../businessLicense/index'
    })
  }

  callPhone(num){
    console.log('template callPhone num',num);
  }

  componentWillMount () {
    const { dispatch } = this.props;
    const {id}=this.$router.params;
    console.log('template componentWillMount id', id);
    dispatch({
      type: 'template/init',
      payload: id
    });
  }

  render () {
    const {details,combo}=this.props.template;
    console.log('template render details', details);
    const data = {
      topBanner:'http://iph.href.lu/300x200?text=占位',
      information:{
        name:'合肥元一希尔顿酒店',
        address:'肥东县临泉东路与龙脊山路(原临湖路)交口向南20米路西',
      },
      recommended:[
        {
          id:1,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'日系秋季男士长袖T恤发卡时间大师傅',
          price:99
        },{
          id:2,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'日系秋季男士长袖T恤',
          price:99
        },{
          id:3,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'日系秋季男士长袖T恤',
          price:99
        },{
          id:4,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'日系秋季男士长袖T恤',
          price:99
        },
      ],
      package:[
        {
          id:1,
          img:'http://iph.href.lu/300x200?text=占位',
          title:'2至4人套餐',
          introduce:'锅底、精品肥牛、精品肥羊、牛肉丸、',
          time:'周一至周日',
          appointment:'免预约',
          price:128,
          originalPrice:222
        },{
          id:2,
          img:'http://iph.href.lu/300x200?text=占位',
          title:'2至4人套餐',
          introduce:'锅底、精品肥牛、精品肥羊、牛肉丸、',
          time:'周一至周日',
          appointment:'免预约',
          price:128,
          originalPrice:222
        },{
          id:3,
          img:'http://iph.href.lu/300x200?text=占位',
          title:'2至4人套餐',
          introduce:'锅底、精品肥牛、精品肥羊、牛肉丸、',
          time:'周一至周日',
          appointment:'免预约',
          price:128,
          originalPrice:222
        },
      ]

    }
    return (
      <View className='index'>
        {/**顶部广告图 */}
        <View className='topBanner-box'>
          <Image src={details.imageHash} className='topBanner' />
        </View>
        {/**地址信息 */}
        <View className='information-box'>
          <Text className='information-name'>{details.name}</Text>
          <View className='information-bottom-box'>
            <Image src={coordinates} className='left-icon' />
            <Text className='information-bottom-address'>{details.address}</Text>
            <Image src={phone} className='right-phone' onClick={this.callPhone.bind(this,details.phone)} />
          </View>
        </View>
        <View onClick={this.businessLicense} className='businessLicense-box'>
          <Text className='businessLicense-text'>工商营业执照</Text>
          <Image src={otherRightArrow} className='otherRightArrow' />
        </View>
        {/**两种模板推荐 */}
        {false?
          <View className='bottom-recommended'>
            <Text className='bottom-recommended-text'>为您推荐</Text>
            <View className='recommended-list'>
              {data.recommended.map(item=>(
                <View key={item.id} className='recommedned-box' onClick={this.$componentType.handleClick}>
                  <Image src={item.img} className='recommendedImg' />
                  <Text className='recommedend-name'>{item.name}</Text>
                  <Text className='recommedend-price'>￥{item.price}/件</Text>
                </View>
              ))}
            </View>
          </View>
        :
        <View className='bottom-package'>
          <Text className='bottom-recommended-text'>商家套餐</Text>
          <View className='package-list'>
              {combo.map(item=>(
                <View key={item.id} className='package-box' onClick={this.$componentType.handleClick.bind(this,item.id)}>
                  <Image src={item.imageHash} className='packageImg' />
                  <View className='middle-box'>
                    <Text className='middle-box-title'>{item.title}</Text>
                    <Text className='middle-box-introduce'>{item.detail}</Text>
                    <View className='middle-first-view-box'>
                      <Text className='middle-first-view-text'>{moment(item.time).format('YYYY-MM-DD')}</Text>
                      <View className='verticalLine' />
                      <Text className='middle-first-view-text'>{item.appointment}</Text>
                    </View>
                    <View>
                      <Text className='middle-bottom-price'>￥{item.price/100}</Text>
                      <Text className='middle-bottom-originalPrice'>￥{item.original/100}</Text>
                    </View>
                  </View>
                  <View className='snap-box'>
                    <Text className='snap'>抢购</Text>
                  </View>
                </View>
              ))}
          </View>
        </View>
        }
      </View>
    )
  }
}
